<template>
  <div class="app-container">
    <el-card class="contentBox">
      <h1 class="title">VIP管理</h1>
      <p class="subTitle">管理您的VIP会员状态和使用权限</p>
      <div class="kill-margin">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12">
            <el-card>
              <template #header>
                <div class="card-header">
                  <span>VIP状态</span>
                </div>
              </template>
              <div v-if="isVip" class="vipStatus is-vip">
                <svg-icon icon-class="vip" class="vipClass" />
                <span>VIP已激活</span>
                <span>到期时间：{{ vipInfo.expireTime }}</span>
                <span>积分：{{ vipInfo.pointNum }}</span>
              </div>
              <div v-else class="vipStatus">
                <svg-icon icon-class="vip" class="vipClass" />
                VIP未激活
                <el-alert
                  title="VIP功能说明"
                  type="warning"
                  show-icon
                  :closable="false"
                >
                  激活VIP后可享受单次生成功能。
                </el-alert>
              </div>
            </el-card>
          </el-col>
          <el-col :xs="24" :sm="12">
            <el-card>
              <template #header>
                <div class="card-header">
                  <span>生成任务</span>
                </div>
              </template>
              <el-form
                ref="form"
                :model="form"
                :rules="rules"
                label-position="top"
              >
                <el-form-item label="激活码" prop="code">
                  <el-input
                    v-model="form.code"
                    placeholder="请输入激活码"
                  ></el-input>
                </el-form-item>
                <el-button
                  @click="activateVip"
                  type="primary"
                  size="large"
                  style="width: 100%"
                  >激活VIP</el-button
                >
              </el-form>
              <el-divider></el-divider>
              <div class="vip-benefits">
                <h4>🎯 VIP特权</h4>
                <ul>
                  <li>✅ 文案生成视频：纯文本描述生成精彩视频</li>
                  <li>✅ 图片生成视频：上传图片+文字描述生成动态视频</li>
                  <li>✅ 多种画面模式：横版、竖版、高清横版、高清竖版</li>
                  <li>✅ 集成目前最顶级视频生成模型：无需提供API密钥</li>
                  <li>✅ 专属生成通道：更快的处理速度</li>
                  <li>✅ 高质量输出：支持高清视频生成</li>
                </ul>
                <div class="feature-highlight">
                  <h5>🚀 核心功能</h5>
                  <div class="feature-grid">
                    <div class="feature-item">
                      <strong>文案生成视频</strong>
                      <p>输入文本描述，AI自动生成视频内容</p>
                    </div>
                    <div class="feature-item">
                      <strong>图片生成视频</strong>
                      <p>基于图片和文字描述生成动态效果</p>
                    </div>
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row style="margin-top: 20px">
          <el-col :span="24">
            <el-card>
              <template #header>
                <div class="card-header">
                  <span>激活历史</span>
                </div>
              </template>
              <el-table :data="activationList">
                <el-table-column label="激活码" align="center" prop="code" />
                <el-table-column label="状态" align="center" prop="status">
                  <template #default="scope">
                    <span v-if="scope.row.status == 1">未使用</span>
                    <span v-if="scope.row.status == 2">已使用</span>
                    <span v-if="scope.row.status == 3">已关闭</span>
                  </template>
                </el-table-column>
                <el-table-column label="激活天数" align="center" prop="days" />
                <el-table-column
                  label="创建人"
                  align="center"
                  prop="createUserName"
                />
                <el-table-column
                  label="使用人"
                  align="center"
                  prop="userName"
                />
                <el-table-column
                  label="使用时间"
                  align="center"
                  prop="usedTime"
                />
              </el-table>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>
<script>
import {
  activateVip,
  getActivateHistory,
  getUserVipInfo,
} from '../../api/user';

export default {
  name: 'UserTask',
  data() {
    return {
      form: {},
      rules: {
        code: [{ required: true, message: '请输入激活码！', trigger: 'blur' }],
      },
      activationList: [],
      vipInfo: {},
    };
  },
  computed: {
    isVip() {
      return this.vipInfo.status === 1;
    },
  },
  created() {
    this.getActivateHistory();
    this.getUserVipInfo();
  },
  methods: {
    async activateVip() {
      await this.$refs.form.validate();
      try {
        await activateVip(this.form.code);
        this.$message.success('激活成功！');
        await this.refresh();
      } catch (error) {
        this.$message.error(error.message || '激活失败！');
      }
    },
    async getActivateHistory() {
      try {
        const response = await getActivateHistory();
        this.activationList = response.data;
      } catch (error) {
        // this.$message.error('获取激活历史失败！');
      }
    },

    async getUserVipInfo() {
      try {
        const response = await getUserVipInfo();
        this.vipInfo = response.data;
      } catch (error) {
        // this.$message.error('获取用户VIP信息失败！');
      }
    },

    refresh() {
      return Promise.all([this.getActivateHistory(), this.getUserVipInfo()]);
    },
  },
};
</script>
<style scoped lang="scss">
.vip-benefits {
  margin-top: 16px;
}
.vip-benefits h4 {
  margin: 0 0 12px;
  color: #262626;
  font-size: 14px;
  font-weight: 600;
}
.vip-benefits ul {
  margin: 0;
  padding-left: 20px;
  color: #262626;
  font-size: 13px;
  line-height: 1.8;
}
.vip-benefits li {
  margin-bottom: 6px;
}
.feature-highlight {
  margin-top: 20px;
  padding: 16px;
  background: linear-gradient(135deg, #f6ffed, #f0f9ff);
  border-radius: 8px;
  border: 1px solid #d9f7be;
}
.feature-highlight h5 {
  margin: 0 0 12px;
  color: #262626;
  font-size: 13px;
  font-weight: 600;
}
.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.feature-item {
  padding: 12px;
  background: #fffc;
  border-radius: 6px;
  border: 1px solid #e8f4fd;
}
.feature-item strong {
  display: block;
  color: #1890ff;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
}
.feature-item p {
  margin: 0;
  color: #595959;
  font-size: 11px;
  line-height: 1.4;
}
.vipStatus {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: grey;
  gap: 20px;
  height: 508px;
  &.is-vip {
    color: gold;
  }
  .vipClass {
    font-size: 80px;
  }
}
</style>
<style>
.mobile .vipStatus {
  height: auto;
}
</style>
